<template>
  <view class="mxp-divider" :style="[cusStyle]" @tap="onClick">
    <mxp-line :color="lineColor" :cusStyle="leftLineStyle" :hairline="hairline" :dashed="dashed"></mxp-line>
    <slot>
      <text v-if="dot" key="text-1" class="dot" :style="dotStyle">●</text>
      <text v-else-if="text" key="text-2" class="text" :style="[newTextStyle]">{{ text }}</text>
    </slot>
    <mxp-line :color="lineColor" :cusStyle="rightLineStyle" :hairline="hairline" :dashed="dashed"></mxp-line>
  </view>
</template>

<script lang="ts" setup>
  import { publicStyeProps } from '../mxp-tool/utils/public-props';
  import { type CSSProperties, type PropType, computed } from 'vue';
  import type { $AllColorStr, $SizeUnitStr } from '@/mxp-ui/mxp-tool/types/interface';
  import MxpLine from '../mxp-line/mxp-line.vue';
  defineOptions({
    name: 'mxp-divider',
  });
  const props = defineProps({
    /** 是否虚线 */
    dashed: { type: Boolean, default: false },
    /** 是否细线 */
    hairline: { type: Boolean, default: false },
    /** 是否以点替代文字，优先于text字段起作用 */
    dot: { type: Boolean, default: false },
    /** 内容文本的位置，left-左边，center-中间，right-右边 */
    textPosition: { type: String as PropType<'center' | 'left' | 'right'>, default: 'center' },
    /** 文本内容 */
    text: { type: [String, Number], default: '我是分割线' },
    /** 文本大小 */
    textSize: { type: String as PropType<$SizeUnitStr>, default: '14px' },
    /** 文本颜色 */
    textColor: { type: String as PropType<$AllColorStr>, default: '#909399' },
    /** 线条颜色 */
    lineColor: { type: String as PropType<$AllColorStr>, default: '#dcdfe6' },
    /** 文本的样式 */
    textStyle: { type: Object as PropType<CSSProperties>, default: () => ({}) },
    /** 圆点样式 圆点是一个字符(●) */
    dotStyle: { type: Object as PropType<CSSProperties>, default: () => ({}) },
    /** textPosition==='right' 时右边线条的宽度 */
    rightLineWidth: { type: String as PropType<$SizeUnitStr>, default: '36px' },
    /** textPosition==='left' 时左边线条的宽度 */
    leftLineWidth: { type: String as PropType<$SizeUnitStr>, default: '36px' },
    ...publicStyeProps,
  });
  defineSlots<{
    /** 主体内容 */
    default?: () => void;
  }>();
  const emits = defineEmits<{
    (e: 'click'): void;
  }>();
  const newTextStyle = computed<CSSProperties>(() => ({ ...props.textStyle, fontSize: props.textSize, color: props.textColor }));

  const leftLineStyle = computed<CSSProperties>(() => {
    const style: CSSProperties = {};
    // 如果是在左边，设置左边的宽度为固定值
    if (props.textPosition === 'left') {
      style.width = props.leftLineWidth;
    } else {
      style.flex = 1;
    }
    return style;
  });

  const rightLineStyle = computed<CSSProperties>(() => {
    const style: CSSProperties = {};
    if (props.textPosition === 'right') {
      style.width = props.rightLineWidth;
    } else {
      style.flex = 1;
    }
    return style;
  });

  /**
   * 点击事件
   */
  function onClick() {
    emits('click');
  }
</script>

<style lang="scss" scoped>
  .mxp-divider {
    display: flex;
    flex: 1;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;

    .text {
      margin: 0 15px;
    }

    .dot {
      margin: 0 15px;
      font-size: 12px;
      color: #c0c4cc;
    }
  }
</style>
